<template>
  <div class="login">
    <div class="box">
      <div class="box_title">
        <span>Login</span>
      </div>
      <div class="box_center">
        <div class="username_box">
          <el-input placeholder="请输入用户名" v-model="username" clearable size="large"></el-input>
        </div>
        <div class="username_box">
          <el-input placeholder="请输入密码" v-model="password" type="password" clearable size="large"> </el-input>
        </div>
        <el-button type="primary" class="login_submit" @click="submit" :loading="loading">登陆</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/login";
import { setToken,setStorage } from "@/utils/cookie";

export default {
  data() {
    return {
      username: "",
      password: "",
      loading:false
    };
  },
  methods: {
    async submit() {
      const { username, password } = this;
      if (username && password) {
        const res = await login({ username, password });
        const data = res.data.detail;
        if (data.token) {
          setToken(data.token);
          this.$router.push({ path: "/" });
          setStorage('username',username);
          setStorage('role',data.role);
          this.$notify.success({
            title: "成功",
            message: "登陆成功"
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: "用户名或密码不正确"
          });
        }
      } else {
        this.$notify({
          title: "注意",
          message: "用户名和密码不能为空"
        });
      }
    }
  }
};
</script>


<style lang="less" scoped>
.login {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(45deg,#3ae,#3963bc);
  background-size: cover;
  .box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -70%);
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .box_title {
      display: flex;
      color: #fff;
      background-size: cover;
      width: 100%;
      height: 60px;
      margin-bottom: 6px;
      font-size: 26px;
      align-items: center;
      padding-left: 2px;
    }
    .box_center {
      display: flex;
      background: #fff;
      border-radius: 5px;  
      width: 100%;
      height: 200px;
      flex-direction: column;
      align-items: center;
      .username_box {
        width: 90%;
        margin-top: 20px;

      
      }

      .login_submit {
        margin-top: 20px;
        width: 90%;
        height: 40px;
        font-size: 18px;
        border: none;
      }
    }
    img {
      margin: 0;
      padding: 0;
    }
  }
}
</style>

